# 一 前言

本章节将围绕自定义 hooks 展开，本章节含的知识点如下：

• 自定义 hooks 的设计和编写。
• 几个自定义 hooks 实战。

# 二 全面理解自定义 hooks

在 hooks 原理章节，详细介绍了 React Hooks 原理，在其他的章节，也陆续讲解了所有常用的 hooks 用法。接下来针对 hooks 进行功能性拓展，来研究一下在 React 中一种逻辑复用，组件强化方式——自定义 hooks 。

# 1 概念

自定义 hooks 是在 React Hooks 基础上的一个拓展，可以根据业务需求制定满足业务需要的组合 hooks ，更注重的是逻辑单元。通过业务场景不同，到底需要React Hooks 做什么，怎么样把一段逻辑封装起来，做到复用，这是自定义 hooks 产生的初衷。

自定义 hooks 也可以说是 React Hooks 聚合产物，其内部有一个或者多个 React Hooks 组成，用于解决一些复杂逻辑。

一个传统自定义 hooks 长如下的样子：

编写：

function useXXX(参数A,参数B){
    /*
     ...自定义 hooks 逻辑
     内部应用了其他 React Hooks —— useState | useEffect | useRef ...
    */
    return [xxx,...]
}

使用：

const [ xxx , ... ] = useXXX(参数A,参数B...)

实际上自定义 hooks 的编写很简单，开发者只需要关心，传入什么参数（也可以没有参数），和返回什么内容就可以了，当然有一些监听和执行副作用的自定义 hooks ，根本无需返回值。

自定义 hooks 参数可能是以下内容：

• hooks 初始化值。
• 一些副作用或事件的回调函数。
• 可以是 useRef 获取的 DOM 元素或者组件实例。
• 不需要参数

自定义 hooks 返回值可能是以下内容：

• 负责渲染视图获取的状态。
• 更新函数组件方法，本质上是 useState 或者 useReducer。
• 一些传递给子孙组件的状态。
• 没有返回值。

# 2 特性

上述讲到了自定义 hooks 基本概念，接下来分析一下它的特性。

# ① 驱动条件

首先要明白一点，开发者写的自定义 hooks 本质上就是一个函数，而且函数在函数组件中被执行。那么自定义 hooks 驱动本质上就是函数组件的执行。

自定义 hooks 驱动条件：

• props 改变带来的函数组件执行。
• useState | useReducer 改变 state 引起函数组件的更新。

# ② 顺序原则

自定义 hooks 内部至少有一个 React Hooks ，那么自定义 hooks 也要遵循 hooks 的规则，不能放在条件语句中，而且要保持执行顺序的一致性。 至于为什么？ 在 hooks 原理章节已经讲过了。

# ③ 条件限定

在自定义 hooks 中，条件限定特别重要。为什么这么说呢，因为考虑 hooks 的限定条件，是一个出色的自定义 hooks 重要因素。举个例子：

一些同学容易滥用自定义 hooks 导致一些问题的发生 ，比如在一个自定义这里写：

function useXXX(){
    const value = React.useContext(defaultContext)
    /* .....用上下文中 value 一段初始化逻辑  */
    const newValue = initValueFunction(value) /* 初始化 value 得到新的 newValue  */
    /* ...... */
    return newValue
}